<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <title>Title</title>
</head>
<style>
</style>
<body>
<div id="app">
    <!--选择地区查询-->
    <i class="el-icon-s-home"></i>
    <span style="height: 10px;">首页 ></span>
    <span style="height: 10px">我的客户</span>
    <el-divider><i></i></el-divider>
    <template>
        企业名称
        <el-input v-model="companyName" style="width: 250px"></el-input>
        产品名称
        <el-input v-model="productName" style="width: 250px"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="conditionQuery">搜索</el-button>
        <!--分割线-->
        <el-divider><i></i></el-divider>
    </template>
    每页显示条数:
    <template>
        <el-input-number v-model="num" controls-position="right" @change="changePageSize" :min="1" :max="10" size="small"></el-input-number>
    </template>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;text-align: center"
                :header-cell-style="{background:'#eee',color:'#606266'}"
                :default-sort = "{prop: 'id', order: 'descending'}"
                border>
            <el-table-column
                    prop="id"
                    sortable
                    label="序号"
                    width="180"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="地区"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.companyProvince }}{{ scope.row.companyCity }}{{ scope.row.companyArea }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.businessScope }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.productName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"  plain
                            @click="openNode(scope.row)">申请</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="loadPage"
            :current-page="curr"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <template>
                选择申请类型:
                <el-radio v-model="par.tParRel" label="0">客户</el-radio>
                <el-radio v-model="par.tParRel" label="1">供应商</el-radio>
            </template>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="supply">确 定</el-button>
  </span>
    </el-dialog>
</div>

</body>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                companyName:null,
                productName:null,
                province:'',//form表单
                city:'',//form表单
                area:'',//form表单
                keyWord:'',
                total:0,
                pageSize:null,
                curr:1,
                num:7,
                tableData: null,
                customerId:'',
                dialogFormVisible: false,
                formLabelWidth:"120px",
                dialogNodeVisible:false,
                company: [],
                companyId: '',
                centerDialogVisible:false,
                radio:'',
                par:{
                    id:'',
                    tParStatus:'',
                    tParStatus2:'',
                    tParTime:'',
                    tAprDesc:'',
                    tParComA:null,
                    tParComB:null,
                    tParRel:''
                }
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            loadPage(curr){
                axios.get('/relation/choose?curr='+this.curr+"&size="+this.num).then(value => {
                    if (value.data.code==1){
                        this.num=value.data.data.size;
                        this.tableData=value.data.data.records;
                        this.curr=value.data.data.current;
                        this.pageSize=value.data.data.size;
                        this.tatal=value.data.data.tatal;
                    }
                })
            },
            //条件查询
            conditionQuery(){
                axios.get('/relation/conditionQuery/'+this.companyName+"/"+this.productName).then(value => {
                    if (value.data.code==1){
                        this.tableData=value.data.data;
                    }
                })
            },
            //每页显示条数
            changePageSize(curr){
                this.loadPage(this.curr);
            },
            //打开FORM
            openForm(){
                this.dialogFormVisible=true;
            },
            //关闭form清空数据
            closeForm(){
                this.customer={
                    id:'',
                    name:'',
                    address:'',
                    telephone: '',
                    email:'',
                    remark:'',
                    business:'',
                    createTime:null,
                    updateTime:null,
                    createUserId:'',
                    updateUserId:'',
                    siteId:''
                }
            },
            //跟新
            handleEdit(row){
                this.province='';
                this.city='';
                this.area='';
                this.customer=row;
                this.dialogFormVisible=true;
            },
            //删除
            handleDelete(row){
                axios.delete("/customer/"+row.id).then(value => {
                    if (value.data.code==1){
                        this.$message("删除成功");
                        this.loadPage(1);
                    }else {
                        this.$message("删除失败");
                        this.loadPage(1);
                    }
                })
            },
            //打开申请框
            openNode(row){
                console.log(row);
                this.companyId=row.id;
                this.centerDialogVisible=true;
            },

            //关闭申请
            closeNode(){
                this.company='';
            },
            supply(){
                console.log(this.radio);
                this.par.tParComB=this.companyId;
                axios.post('/par',this.par).then(value => {
                    if (value.data.code==1){
                        this.$message("申请成功");
                        this.centerDialogVisible=false;
                        this.loadPage(1)
                    }
                })
            }
        },
        mounted(){
            this.loadPage(1);
            //填充下拉栏--省
        }
    })
</script>
</html>